<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link href="@/static/css.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background-color: #DBE0F9;
            font-family: 'Roboto', sans-serif;
        }

        .svg-top {
            position: absolute;
            top: -900px;
            right: -300px;
        }

        .svg-bottom {
            position: absolute;
            bottom: -500px;
            left: -200px;
        }

        .container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .container .wrapper {
            padding: 40px;
            background-color: #fff;
            border-radius: 20px;
            width: 350px;
            z-index: 1;
        }

        .container .wrapper header {
            margin-bottom: 40px;
        }

        .container .wrapper header .logo {
            width: 70px;
            height: 70px;
            border-radius: 50px;
            background-color: #6065D9;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .wrapper header .logo span {
            font-size: 18px;
            color: #fff;
        }

        .container .wrapper header h1 {
            color: #6065D9;
            font-size: 35px;
            font-weight: 500;
            margin-bottom: 0;
            margin-top: 40px;
        }

        .container .wrapper header p {
            color: #6065D9;
            font-size: 18px;
            font-weight: 300;
            margin: 5px 0 0 0;
        }

        .container .wrapper .main-content input {
            border: none;
            display: block;
            width: 100%;
            height: 50px;
            margin: 15px 0;
            font-size: 18px;
            color: #999;
        }

        .container .wrapper .main-content input::placeholder {
            color: #999;
            font-size: 18px;
            font-weight: 300;
        }

        .container .wrapper .main-content input:focus {
            outline: none;
        }

        .container .wrapper .main-content .line {
            width: 100%;
            height: 2px;
            background-color: rgba(153, 153, 153, 0.33);
        }

        .container .wrapper .main-content button {
            background: linear-gradient(to right, #6065D9, #17D7FA);
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 300;
            color: #fff;
            display: block;
            width: 100px;
            height: 40px;
            margin: 0 auto;
            outline: none;
            cursor: pointer;
        }

        .container .wrapper footer {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 60px;
        }

        .container .wrapper footer p {
            margin: 0;
            font-weight: 100;
        }

        .container .wrapper footer p a {
            color: #6065D9;
            text-decoration: none;
        }

        @media (min-width: 320px) and (max-width: 768px) {
            .container .wrapper {
                margin: 0 10px !important;
                padding: 30px;
            }

            .container .wrapper header h1 {
                font-size: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="svg-top">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1337"
            width="1337">
            <defs>
                <path id="path-1" opacity="1" fill-rule="evenodd"
                    d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z" />
                <linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
                    <stop offset="0" stop-color="rgb(88,62,213)" stop-opacity="1" />
                    <stop offset="1" stop-color="rgb(23,215,250)" stop-opacity="1" />
                </linearGradient>
            </defs>
            <g opacity="1">
                <use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
            </g>
        </svg>
    </div>
    <div class="svg-bottom">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="896"
            width="967.8852157128662">
            <defs>
                <path id="path-2" opacity="1" fill-rule="evenodd"
                    d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z" />
                <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
                    <stop offset="0" stop-color="rgb(40,175,240)" stop-opacity="1" />
                    <stop offset="1" stop-color="rgb(18,15,196)" stop-opacity="1" />
                </linearGradient>
            </defs>
            <g opacity="1">
                <use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
            </g>
        </svg>
    </div>

    <section class="container">
        <section class="wrapper">
            <header>
                <div class="logo">
                    <span>Logo</span>
                </div>
                <h1>Welcome back!</h1>
                <p>User Login</p>
            </header>
            <section class="main-content">
                <form action="">
                    <input type="email" placeholder="Email">
                    <div class="line"></div>
                    <input type="password" placeholder="Password">
                    <button type="button">Login</button>
                </form>
            </section>
            <footer>
                <p><a href="" title="Forgot Password">Forgot Password?</a></p>
                <p><a href="" title="Register">Register</a></p>
            </footer>
        </section>
    </section>
</body>

</html>